<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <script src="../../js/vue.min.js"></script>
	</head>
	<body>
		<!--我们可以传给 v-bind:class 一个对象，以动态地切换 class。注意 v-bind:class 指令可以与普通的 class 特性共存：-->
		<style>
		    .red88{
		      color: red;
		    }
		    .blue88{
		      background: blue;
		    }
			.yellow88{
			  color: yellow;
			}
		  </style>



	 <div id="app">
	      <div :class="{ 'red88' : isActive }">11111</div>
		  <div v-bind:class="{ 'red88' : isActive }">2222</div>
<!--对象也可以传入多个属性，来动态切换class。另外，:class可以与普通class共存
下面渲染后的结果为
<div class="yellow88 red88">33333</div>
-->
		  <div class="yellow88" :class="{'red88':isActive, 'blue88':isError}">33333</div>
	 </div>
	  
	  <script>
	      var app = new Vue({
	          el: "#app",
	          data: {
	             isActive: true,
				 isError: false,
	        }
	    });
	</script>
		
		
		
		
</html>
